{% extends "themes/main.html" %} 

{% block title %}{{ note.title }}{% end %}

{% block head_extra %}
<link rel="stylesheet" href="{{ static_url('note.css') }}">
{% end %}

{% block main %}
{% from pyquery import PyQuery %}
<div class="container">
    <nav class="level">
        <div class="level-left">
            <div class="level-item">
                <a class="button" onclick="history.back()">
                    <span class="icon">
                        <i class="fas fa-chevron-left"></i>
                    </span>
                    <span>返回</span>
                </a>
            </div>
        </div>
        <div class="level-right">
            <p class="level-item">
                <!--<a class="button" href="">查看历史记录</a>-->
            </p>
        </div>
    </nav>

    <article class="content">
        <h1>
            <a href="{{ note.url }}" class="external-link">{{ note.title }}</a>
        </h1>
        <p>
            <small>{{ note.created }}</small>
        </p>
        <div class="container note">
            {%raw content %}
        </div>
        <p>
            <span>{{ note.views_count }}人浏览</span>
            <span style="margin-left: 10px;">{{ note.comments_count }}回应</span>
            {% if note.like_count %}
            <span style="margin-left: 10px;">喜欢({{ note.like_count }})</span>
            {% end %}
            {% if note.rec_count %}
            <span style="margin-left: 10px;">推荐({{ note.rec_count }})</span>
            {% end %}
        </p>
    </article>

    {% for comment in comments %}
    <article class="media">
        <figure class="media-left">
            <p class="image is-32x32">
                <img src="{{ comment.user.avatar }}">
            </p>
        </figure>
        <div class="media-content">
            <p>
                <strong><a href="{{ comment.user.alt }}" class="external-link">{{ comment.user.name }}</a></strong>
                <small>(@{{ comment.user.unique_name}})</small>
                <small class="has-text-grey-light">{{ comment.user.signature }}</small>
                <span>{{ comment.created}}</span>
            </p>
            <p class="text-break">{{ comment.text }}</p>
        </div>
    </article>
    {% end %}

</div>
{% end %}
